<template>
  <div class="dnyasty">
    <div class="table">
      <el-table :data="lists" style="width: 100%" v-if="searchColumns.length > 0" border>
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="60" label="顺序" align="center" />
        <template v-for="(x, y) in searchColumns" :key="y">
          <el-table-column :prop="x.name" :label="x.title" :width="x.width" align="center" />
        </template>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { queryData, getColumnList } from '@/apis/mysql';
onMounted(() => {
  getColumns()
})
const lists = ref([])
const searchColumns = ref([])
function getColumns(){
  getColumnList('dynastys').then(res => {
    searchColumns.value = res.data
    getList()
  })
}
function getList() {
  queryData({
    table: 'dynastys',
    query: {
      page: 1,
      show: 80
    }
  }).then(res => {
    lists.value = res.data
  })
}
</script>
<style scoped lang="scss"></style>
